<script setup lang="ts">
// 移除不再需要的 loadingIcon 导入
import { computed } from 'vue'
import 'virtual:uno.css'

/**
 * type: 按钮风格
 * size: 按钮尺寸
 * loading: 是否加载中
 * disabled: 是否禁用
 */
const props = defineProps<{
  type?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
  size?: 'default' | 'sm' | 'lg' | 'icon'
  disabled?: boolean
  loading?: boolean
}>()

// 默认值
const type = computed(() => props.type || 'default')
const size = computed(() => props.size || 'default')

// unocss 原子类映射
const typeClass = computed(() => ({
  default: 'bg-primary text-white shadow hover:bg-primary/90 border-none',
  destructive: 'bg-red-600 text-white shadow hover:bg-red-700 border-none',
  outline: 'border border-gray-300 bg-white shadow hover:bg-gray-100',
  secondary: 'bg-gray-200 text-gray-800 shadow hover:bg-gray-300',
  ghost: 'bg-transparent hover:bg-gray-100',
  link: 'text-primary bg-transparent underline underline-offset-4 hover:text-blue-600 border-none',
}[type.value]))

const sizeClass = computed(() => ({
  default: 'h-9 px-4 py-2 text-sm rounded',
  sm: 'h-8 px-3 py-1 text-sm rounded',
  lg: 'h-10 px-6 py-2 text-base rounded',
  icon: 'w-9 h-9 flex items-center justify-center rounded-full',
}[size.value]))
</script>

<template>
  <button :class="[
    'inline-flex items-center justify-center gap-2 transition-all disabled:opacity-50 disabled:pointer-events-none',
    typeClass,
    sizeClass
  ]" :disabled="disabled || loading" :btn-type="type">
    <!-- loading 状态下显示纯CSS loading 动画 -->
    <div v-if="loading" class="loading-spinner"></div>
    <slot v-else />
  </button>
</template>

<style scoped>
/* CSS Loading 动画 - 旋转圆圈效果 */
.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 旋转动画关键帧 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 针对不同按钮类型调整loading颜色 */
button[btn-type="default"] .loading-spinner {
  border-top-color: white;
}

button[btn-type="destructive"] .loading-spinner {
  border-top-color: white;
}

button[btn-type="outline"] .loading-spinner {
  border-top-color: #374151;
}

button[btn-type="secondary"] .loading-spinner {
  border-top-color: #6b7280;
}

button[btn-type="link"] .loading-spinner {
  border-top-color: #3b82f6;
}
</style>